<template>
	<view class="index">
		<s-header :item="product"></s-header>
		<s-description :item="product"></s-description>
		<s-content :item="product"></s-content>
		<s-footer :item="product"></s-footer>
		
		<sdc-cart></sdc-cart>
	</view>
</template>

<script>
	import SHeader from './components/detail/s-header.vue'
	import SDescription from './components/detail/s-description.vue'
	import SContent from './components/detail/s-content.vue'
	import SFooter from './components/detail/s-footer.vue'
	export default {
		data() {
			return {
				productId: null,
				product: {}
			};
		},
		components: {
			SHeader,
			SDescription,
			SContent,
			SFooter
		},
		methods: {
			loadProduct(){
				return this.$api.product.show({
					id: this.productId
				})
				.then(res=>{
					if(res.code == 1)
						this.product = res.data
				})
			}
		},
		onLoad() {
			this.productId = this.$Route.query.id
			this.loadProduct()
		}
	}
</script>

<style lang="scss">

</style>
